.chat-container {
    max-height: calc(100vh - 100px);
   }
   /* 修改消息元信息样式 */
   .message-meta {
     display: flex;
     justify-content: space-between;
     align-items: flex-end; /* 新增对齐方式 */
     margin-bottom: 8px;
   }
   
   .sender {
     font-weight: 600;
     font-size: 1.1em; /* 放大用户名 */
     color: #2d2d2f;
   }
   
   .time {
     font-size: 0.75em; /* 缩小时间字体 */
     color: #8e8e93;    /* Apple风格灰色 */
     letter-spacing: 0.5px;
   }
   
   .chat-container {
     max-width: 80vw;
     width: 80vw;
     margin: 0 auto;
     height: 100vh;
     display: flex;
     flex-direction: column;
   }
   
   .message-area {
     flex: 1;
     overflow-y: auto;
     padding: 20px 0;
     max-width: 80vw;
     margin: 0 0;
   }
   
   .message-bubble {
     max-width: 100%;
     margin: 20px 0;
     padding: 16px 20px;
     border-radius: 12px;
     background: var(#ffffff);
     border: 1px solid var(--border-color, #e4e4e4);
     box-shadow: var(--shadow-base, 0 2px 8px rgba(0, 0, 0, 0.05));
   }
   
   /* 调整消息悬停效果 */
   .message-bubble:hover {
     box-shadow: var(--shadow-base, 0 4px 16px rgba(0, 0, 0, 0.12));
     background: var(--bg-color-hover, #f8f9fa);
   }
   
   .input-area {
     max-width: 80vw;
     width: 80vw;
     margin: 20px auto;
     padding: 16px;
     border-radius: 12px;
     background: #fff;
     box-shadow: var(--shadow-base-light, 0 4px 20px rgba(0, 0, 0, 0.12)) !important;
   }
   
   /* 夜间模式适配 */
   .dark-mode .input-area {
     box-shadow: var(--shadow-base, 0 4px 16px rgba(255, 255, 255, 0.15)) !important;
   }

   .dark-mode .sender,
   .dark-mode .time,
   .dark-mode .message-content{
     color: #ffffff; 
   }
   
   .dark-mode .el-button {
     background-color: #717175;
     color: #ffffff;
     border: none;
     
   }
   
   .dark-mode .message-bubble {
    border: none; 
   }
   
   .input-area .el-input {
    width: 94%;
    padding-right: 20px;
   }